<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="realtime-offline-taskoperation">
    <div class="operation-header">
      <el-button size="small" type="primary" @click="operate('back')">返回</el-button>  
      <el-button size="small" type="primary" @click="operate('save')">保存</el-button>
    </div>
    <div v-if="cardShow" class="operation-body flex flex-wrap gap-4">
      <el-card :style="{width: props.operationType == 'edit' ? '49%' : '99%'}" shadow="always">
        <template #header>
          <div class="card-header">
            <span class="title">基础信息</span>
          </div>
        </template>
        <BaseInfo ref="baseInfo" :formInfo="baseFormInfo" :taskType="props.taskType" :taskTypes="taskTypes" @handleEvent="changeTaskType" />
      </el-card>
      <el-card v-if="props.operationType == 'edit'" style="width: 49%;" shadow="always">
        <template #header>
          <div class="card-header">
            <span class="title">运行信息</span>
          </div>
        </template>
        <el-form ref="formRef" inline size="small" label-width="100" class="form_class">
          <el-form-item label="状态:" prop="taskName">
            <span>{{ baseFormInfo.statusByName }}</span>  
          </el-form-item>
          <el-form-item label="任务类型:" prop="syncType">
            <span>{{ baseFormInfo.taskType }}</span>  
          </el-form-item>
          <el-form-item label="更新时间:">
            <span>{{ baseFormInfo.createTime }}</span>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="width: 49%;" shadow="always">
        <template #header>
          <div class="card-header">
            <span class="title">源配置</span>
          </div>
        </template>
        <SourceConfig ref="sourceConfig" :formInfo="sourceInfo" :taskType="props.taskType" :encodingDicts="encodingDicts" @handleEvent="handleTableList" />
      </el-card>
      <el-card style="width: 49%;" shadow="always">
        <template #header>
          <div class="card-header">
            <span class="title">目标配置</span>
          </div>
        </template>
        <TargetConfig ref="targetConfig" :formInfo="targetInfo" :sourceTable="sourceTable" />
      </el-card>
      <el-card v-if="props.taskType == 'OFFLINE_SYNC'" style="width: 49%;" shadow="always">
        <template #header>
          <div class="card-header">
            <span class="title">调度配置</span>
          </div>
        </template>
        <DispatchConfig ref="dispatchConfig" :formInfo="dispatchInfo" />
      </el-card>
    </div>
  </div>
</template>
        
<script name="TaskOperation" setup>
import { defineEmits, defineProps } from 'vue';  
import { getDicts } from '@/api/system/dict/data';
import { addDatasourceDataIntegrationTask, editDatasourceDataIntegrationTask, getDatasourceDataIntegrationTaskDetail } from '@/api/dataIntegration/dataSync';
import BaseInfo from './BaseInfo.vue';
import SourceConfig from './SourceConfig.vue';
import TargetConfig from './TargetConfig.vue';
import DispatchConfig from './DispatchConfig.vue';
const emits = defineEmits(['handleEvent']);
const props = defineProps(['taskType', 'rowId', 'operationType']);
const baseInfo = ref();
const sourceConfig = ref();
const targetConfig = ref();
const dispatchConfig = ref();
const cardShow = ref(true);
const baseFormInfo = ref({
  statusByName: '',
  taskType: '',
  createTime: '',
  syncType: props.taskType,
});
const sourceInfo = ref();
const targetInfo = ref();
const dispatchInfo = ref();
const taskTypes = ref([]);
const encodingDicts = ref([]);
const sourceTable = ref([]); // 源表字段
const operate = async (type) => {
  if (type == 'back') {
    emits('handleEvent', { component: 'TaskList', type: props.taskType });
  } else if (type == 'save') {
    let flag4 = null;
    let flag1 = await baseInfo.value.formRef.validate((valid, fields) => {
      if (valid) {
        return true;
      } else {
        return false;
      }
    })
    let flag2 = await sourceConfig.value.formRef.validate((valid, fields) => {
      if (valid) {
        return true;
      } else {
        return false;
      }
    })
    let flag3 = await targetConfig.value.formRef.validate((valid, fields) => {
      if (valid) {
        return true;
      } else {
        return false;
      }
    })
    props.taskType == 'OFFLINE_SYNC' && (flag4 = await dispatchConfig.value.formRef.validate((valid, fields) => {
      if (valid) {
        return true;
      } else {
        return false;
      }
    }))
    if (!flag1 || !flag2 || !flag3) {
      return;
    }
    if (props.taskType == 'OFFLINE_SYNC' && !flag4) {
      return;
    }
    let params = {
      ...baseInfo.value.formInfo,
      datasourceTaskDataSourceConfigBo: sourceConfig.value.formInfo,
      datasourceTaskTargetConfigBo: targetConfig.value.formInfo,
      datasourceTaskSchedulingConfigBo: null,
    }
    if (props.taskType == 'OFFLINE_SYNC') {
      // 处理调度配置时间
      let schedulingInfo = JSON.parse(JSON.stringify(dispatchConfig.value.formInfo)); // 深拷贝 
      schedulingInfo.startTime = schedulingInfo.dispatchTime[0];
      schedulingInfo.endTime = schedulingInfo.dispatchTime[1];
      schedulingInfo.effectiveStartTime = schedulingInfo.effectTime[0];
      schedulingInfo.effectiveEndTime = schedulingInfo.effectTime[1];
      delete schedulingInfo.dispatchTime;
      delete schedulingInfo.effectTime;
      params.datasourceTaskSchedulingConfigBo = schedulingInfo;
    }
    let requestApi = props.rowId? editDatasourceDataIntegrationTask : addDatasourceDataIntegrationTask;
    requestApi(params).then(res => {
      ElMessage({ showClose: true, message: props.rowId ? '修改成功' : '新增成功', type: 'success' });
      emits('handleEvent', { component: 'TaskList', type: props.taskType });
    })
  }
}
const changeTaskType = (val) => {
  sourceConfig.value.taskType = val;
}
const handleTableList = (obj) => {
  !obj.init && targetConfig.value.refreshSourceField();
  sourceTable.value = obj.data;
}
const getDetail = async () => {
  cardShow.value = false;
  let res = await getDatasourceDataIntegrationTaskDetail(props.rowId);
  let allInfo = JSON.parse(JSON.stringify(res.data));
  delete allInfo.datasourceTaskDataSourceConfigVo;
  delete allInfo.datasourceTaskTargetConfigVo; 
  delete allInfo.datasourceTaskSchedulingConfigVo;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    res.data;
  baseFormInfo.value = allInfo;
  sourceInfo.value = res.data.datasourceTaskDataSourceConfigVo;
  targetInfo.value = res.data.datasourceTaskTargetConfigVo;
  if (props.taskType == 'OFFLINE_SYNC') {
    let schedulingInfo = res.data.datasourceTaskSchedulingConfigVo;
    schedulingInfo.dispatchTime = [schedulingInfo.startTime, schedulingInfo.endTime];
    schedulingInfo.effectTime = [schedulingInfo.effectiveStartTime, schedulingInfo.effectiveEndTime];
    dispatchInfo.value = schedulingInfo;
  }
  cardShow.value = true;
}
// 查询类型字典
getDicts('data_integration_constants').then((res) => {
  if (res.data) {
    let realtimeTypes = res.data.find(item => item.dictLabel == 'realtime_task_type')?.dictValue;
    let offlineTypes = res.data.find(item => item.dictLabel == 'offine_task_type')?.dictValue;
    let encodingTypes = res.data.find(item => item.dictLabel == 'encoding')?.dictValue;
    // options.value = props.taskType === 'offline' ? JSON.parse(offlineTypes) : JSON.parse(realtimeTypes);
    taskTypes.value = JSON.parse(realtimeTypes);
    encodingDicts.value = JSON.parse(encodingTypes);
  }
});
onMounted(() => {
  props.rowId && getDetail();
});
</script>
<style scoped lang="scss">
:deep(.asterisk-left) {
  width: 100%;
}
:deep(.el-table__body-wrapper) {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.realtime-offline-taskoperation {
  .operation-header {
    padding: 15px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: rgba(0, 0, 0, 0.12);
  }
  .operation-body {
    padding: 10px;
    margin-top: 10px;
    .card-header {
      .title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        &::before {
          content: "";
          display: inline-block;
          width: 3px;
          height: 16px;
          margin-right: 5px;
          background-color: #004EA2;
          vertical-align: middle;
          margin-top: -3px;
        }
      }
    }
  }
}
</style>
